Complete ARIA & Keyboard Navigation

A comprehensive guide to ARIA roles, states, properties, and keyboard navigation patterns for building accessible web applications.

Table of Contents

1. ARIA Roles
2. ARIA States & Properties
3. Accessible Notes & Text Areas
4. Keyboard Navigation Patterns
5. Live Regions & Dynamic Content
6. Form Accessibility
7. Modal & Dialog Patterns
8. Testing & Validation

---

ARIA Roles

ARIA roles define what an element is semantically to assistive technologies. They communicate the purpose and behavior of elements.

Landmark Roles

Landmark roles help users navigate page structure and find content quickly.

<!-- Site-wide header -->
<header role="banner">
  <h1>My Website</h1>
  <nav role="navigation" aria-label="Main menu">
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<!-- Main content area -->
<main role="main">
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</main>

<!-- Sidebar content -->
<aside role="complementary" aria-labelledby="sidebar-heading">
  <h3 id="sidebar-heading">Related Links</h3>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</aside>

<!-- Site footer -->
<footer role="contentinfo">
  <p>&copy; 2025 My Website</p>
</footer>

💡 Best Practice: Use semantic HTML elements (<header>, <nav>, <main>, <aside>, <footer>) which have implicit ARIA roles. Only add explicit roles when semantic HTML isn't sufficient.

Widget Roles

Widget roles define interactive components and their expected behaviors.

<!-- Custom button -->
<div
  role="button"
  tabindex="0"
  aria-pressed="false"
  onkeydown="handleButtonKeydown(event)"
  onclick="toggleButton()"
>
  Toggle Setting
</div>

<!-- Custom checkbox -->
<div
  role="checkbox"
  tabindex="0"
  aria-checked="false"
  aria-labelledby="custom-checkbox-label"
>
  <span id="custom-checkbox-label">Enable notifications</span>
</div>

<!-- Dialog/Modal -->
<div
  role="dialog"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-description"
  aria-modal="true"
>
  <h2 id="dialog-title">Confirm Action</h2>
  <p id="dialog-description">Are you sure you want to delete this item?</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

<!-- Tab interface -->
<div role="tablist" aria-label="Settings tabs">
  <button
    role="tab"
    aria-selected="true"
    aria-controls="general-panel"
    id="general-tab"
  >
    General
  </button>
  <button
    role="tab"
    aria-selected="false"
    aria-controls="privacy-panel"
    id="privacy-tab"
  >
    Privacy
  </button>
</div>

<div role="tabpanel" id="general-panel" aria-labelledby="general-tab">
  <h3>General Settings</h3>
  <!-- Panel content -->
</div>

Document Structure Roles

<!-- Article with proper heading structure -->
<article role="article">
  <header>
    <h1>Article Title</h1>
    <p>Published on <time datetime="2025-01-15">January 15, 2025</time></p>
  </header>

  <div role="region" aria-labelledby="section1">
    <h2 id="section1">Introduction</h2>
    <p>Content...</p>
  </div>
</article>

<!-- Data table -->
<table role="table" aria-label="Sales data">
  <thead>
    <tr role="row">
      <th role="columnheader">Month</th>
      <th role="columnheader">Sales</th>
      <th role="columnheader">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr role="row">
      <td role="cell">January</td>
      <td role="cell">$10,000</td>
      <td role="cell">+5%</td>
    </tr>
  </tbody>
</table>

<!-- List with custom styling -->
<ul role="list" aria-label="Feature list">
  <li role="listitem">Feature 1</li>
  <li role="listitem">Feature 2</li>
  <li role="listitem">Feature 3</li>
</ul>

---

ARIA States & Properties

ARIA states and properties describe the current condition and relationships of elements.

Common States

States describe the current condition of an element and can change frequently.

<!-- Disabled state -->
<button aria-disabled="true" onclick="handleClick(event)">
  Save (processing...)
</button>

<!-- Expanded/Collapsed states -->
<button aria-expanded="false" aria-controls="menu-items" onclick="toggleMenu()">
  Menu <span aria-hidden="true">▼</span>
</button>
<ul id="menu-items" hidden>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

<!-- Checked states -->
<div
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  onclick="toggleCheck(this)"
>
  <span class="checkbox-icon" aria-hidden="true">☐</span>
  Enable feature
</div>

<div role="checkbox" aria-checked="mixed" tabindex="0">
  <span class="checkbox-icon" aria-hidden="true">☑</span>
  Select all items (some selected)
</div>

<!-- Selected state -->
<ul role="listbox" aria-label="Color options">
  <li role="option" aria-selected="false" tabindex="0">Red</li>
  <li role="option" aria-selected="true" tabindex="-1">Blue</li>
  <li role="option" aria-selected="false" tabindex="-1">Green</li>
</ul>

<!-- Hidden state -->
<div aria-hidden="true" class="decorative-icon">🎉</div>
<span class="sr-only">Celebration complete!</span>

Properties (Relationships & Descriptions)

Properties describe relationships between elements and provide additional context.

<!-- Labeling -->
<input
  type="email"
  id="email-input"
  aria-label="Email address"
  aria-required="true"
  aria-invalid="false"
/>

<!-- Label by reference -->
<h2 id="billing-heading">Billing Information</h2>
<fieldset aria-labelledby="billing-heading">
  <input type="text" placeholder="Card number" />
  <input type="text" placeholder="Expiry date" />
</fieldset>

<!-- Described by reference -->
<input
  type="password"
  id="password"
  aria-describedby="password-help password-strength"
/>
<div id="password-help">Password must be at least 8 characters long</div>
<div id="password-strength" aria-live="polite">Password strength: Weak</div>

<!-- Controls relationship -->
<button
  aria-controls="video-player"
  aria-pressed="false"
  onclick="togglePlayback()"
>
  <span aria-hidden="true">▶️</span>
  Play video
</button>
<video id="video-player" src="video.mp4"></video>

<!-- Owns relationship -->
<div role="combobox" aria-owns="suggestions-list" aria-expanded="false">
  <input type="text" aria-autocomplete="list" />
  <ul id="suggestions-list" role="listbox" hidden>
    <li role="option">Suggestion 1</li>
    <li role="option">Suggestion 2</li>
  </ul>
</div>

<!-- Flow to (reading order) -->
<div id="step1">
  <h3>Step 1: Enter details</h3>
  <input type="text" aria-flowto="step2" />
</div>
<div id="step2" aria-flowto="step3">
  <h3>Step 2: Review</h3>
  <!-- content -->
</div>

---

Accessible Notes & Text Areas

Creating accessible text input areas for notes, comments, and long-form content.

Basic Textarea Implementation

<!-- Semantic HTML approach (preferred) -->
<div class="form-group">
  <label for="notes">Meeting Notes</label>
  <textarea
    id="notes"
    name="notes"
    rows="6"
    cols="50"
    aria-required="true"
    aria-describedby="notes-help notes-count"
    placeholder="Enter your notes here..."
  ></textarea>

  <div id="notes-help" class="help-text">
    Include key discussion points and action items
  </div>

  <div id="notes-count" class="character-count" aria-live="polite">
    0 / 500 characters
  </div>
</div>

Rich Text Editor (Contenteditable)

When you need more than basic textarea functionality:

<div class="rich-editor">
  <label id="editor-label">Article Content</label>

  <!-- Toolbar -->
  <div
    role="toolbar"
    aria-label="Formatting options"
    aria-controls="editor-content"
  >
    <button
      type="button"
      aria-pressed="false"
      onclick="toggleFormat('bold')"
      title="Bold (Ctrl+B)"
    >
      <strong aria-hidden="true">B</strong>
      <span class="sr-only">Bold</span>
    </button>

    <button
      type="button"
      aria-pressed="false"
      onclick="toggleFormat('italic')"
      title="Italic (Ctrl+I)"
    >
      <em aria-hidden="true">I</em>
      <span class="sr-only">Italic</span>
    </button>
  </div>

  <!-- Editor content -->
  <div
    id="editor-content"
    role="textbox"
    aria-multiline="true"
    aria-labelledby="editor-label"
    aria-describedby="editor-help"
    contenteditable="true"
    spellcheck="true"
    tabindex="0"
    onkeydown="handleEditorKeydown(event)"
    oninput="updateCharCount()"
  ></div>

  <div id="editor-help" class="help-text">
    Use Ctrl+B for bold, Ctrl+I for italic. Press Shift+F10 for formatting
    options.
  </div>
</div>

Error States and Validation

<div class="form-group">
  <label for="required-notes">Project Description *</label>

  <textarea
    id="required-notes"
    aria-required="true"
    aria-invalid="true"
    aria-describedby="notes-error notes-help"
  >
  </textarea>

  <!-- Error message -->
  <div id="notes-error" role="alert" class="error-message" aria-atomic="true">
    <span class="error-icon" aria-hidden="true">⚠️</span>
    Project description is required and must be at least 10 characters long.
  </div>

  <!-- Help text -->
  <div id="notes-help" class="help-text">
    Describe the project goals, timeline, and key deliverables.
  </div>
</div>

Advanced Notes Features

<div class="advanced-notes-editor">
  <!-- Header with metadata -->
  <div class="notes-header">
    <h3 id="notes-title">Session Notes</h3>
    <div class="notes-meta" aria-label="Note metadata">
      <span>Last saved: <time id="last-saved">2 minutes ago</time></span>
      <span>Word count: <span id="word-count">247</span></span>
    </div>
  </div>

  <!-- Main editor -->
  <div class="editor-container">
    <textarea
      id="advanced-notes"
      aria-labelledby="notes-title"
      aria-describedby="editor-status keyboard-shortcuts"
      spellcheck="true"
      autocorrect="on"
      autocapitalize="sentences"
      onkeydown="handleAdvancedKeydown(event)"
      oninput="autoSave()"
      onfocus="showKeyboardHelp()"
      onblur="hideKeyboardHelp()"
    >
    </textarea>

    <!-- Auto-save status -->
    <div
      id="editor-status"
      aria-live="polite"
      aria-atomic="false"
      class="save-status"
    >
      All changes saved
    </div>
  </div>

  <!-- Keyboard shortcuts help -->
  <div
    id="keyboard-shortcuts"
    class="keyboard-help"
    role="region"
    aria-label="Keyboard shortcuts"
  >
    <h4>Keyboard Shortcuts</h4>
    <dl>
      <dt>Ctrl + S</dt>
      <dd>Save notes</dd>
      <dt>Ctrl + Z</dt>
      <dd>Undo</dd>
      <dt>Ctrl + Y</dt>
      <dd>Redo</dd>
      <dt>Ctrl + F</dt>
      <dd>Find in notes</dd>
    </dl>
  </div>
</div>

---

Keyboard Navigation Patterns

Comprehensive keyboard navigation patterns for different UI components.

Focus Management Principles

// Focus management utilities
class FocusManager {
  constructor() {
    this.focusableSelectors = [
      'a[href]',
      'button',
      'input',
      'select',
      'textarea',
      '[tabindex]',
      '[contenteditable="true"]',
    ].join(', ');
  }

  getFocusableElements(container) {
    const elements = container.querySelectorAll(this.focusableSelectors);
    return Array.from(elements).filter(el => {
      return (
        !el.disabled && !el.hasAttribute('aria-hidden') && el.tabIndex !== -1
      );
    });
  }

  trapFocus(container) {
    const focusableElements = this.getFocusableElements(container);
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];

    container.addEventListener('keydown', e => {
      if (e.key === 'Tab') {
        if (e.shiftKey) {
          if (document.activeElement === firstElement) {
            e.preventDefault();
            lastElement.focus();
          }
        } else {
          if (document.activeElement === lastElement) {
            e.preventDefault();
            firstElement.focus();
          }
        }
      }
    });
  }
}

Button Navigation

<div class="button-group" role="group" aria-label="Document actions">
  <button
    type="button"
    onclick="saveDocument()"
    onkeydown="handleButtonKeydown(event, 'save')"
  >
    Save
  </button>

  <button
    type="button"
    onclick="previewDocument()"
    onkeydown="handleButtonKeydown(event, 'preview')"
  >
    Preview
  </button>

  <button
    type="button"
    onclick="publishDocument()"
    onkeydown="handleButtonKeydown(event, 'publish')"
  >
    Publish
  </button>
</div>

<script>
  function handleButtonKeydown(event, action) {
    // Enter and Space activate buttons
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      event.target.click();
    }

    // Arrow key navigation within button group
    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
      const buttons = [...event.target.parentNode.querySelectorAll('button')];
      const currentIndex = buttons.indexOf(event.target);
      let nextIndex;

      if (event.key === 'ArrowRight') {
        nextIndex = (currentIndex + 1) % buttons.length;
      } else {
        nextIndex = currentIndex === 0 ? buttons.length - 1 : currentIndex - 1;
      }

      buttons[nextIndex].focus();
      event.preventDefault();
    }
  }
</script>

Menu Navigation

<div class="menu-container">
  <button
    id="menu-trigger"
    aria-haspopup="true"
    aria-expanded="false"
    aria-controls="main-menu"
    onkeydown="handleMenuTriggerKeydown(event)"
    onclick="toggleMenu()"
  >
    File <span aria-hidden="true">▼</span>
  </button>

  <ul
    id="main-menu"
    role="menu"
    aria-labelledby="menu-trigger"
    hidden
    onkeydown="handleMenuKeydown(event)"
  >
    <li role="menuitem" tabindex="-1">
      <button type="button" onclick="newDocument()">
        New <kbd aria-hidden="true">Ctrl+N</kbd>
      </button>
    </li>

    <li role="menuitem" tabindex="-1">
      <button type="button" onclick="openDocument()">
        Open <kbd aria-hidden="true">Ctrl+O</kbd>
      </button>
    </li>

    <li role="separator" aria-hidden="true"></li>

    <li
      role="menuitem"
      aria-haspopup="true"
      aria-expanded="false"
      tabindex="-1"
    >
      <button type="button" onclick="toggleRecentMenu()">
        Recent Files <span aria-hidden="true">▶</span>
      </button>

      <!-- Submenu -->
      <ul role="menu" hidden>
        <li role="menuitem" tabindex="-1">
          <button type="button">Document1.txt</button>
        </li>
        <li role="menuitem" tabindex="-1">
          <button type="button">Document2.txt</button>
        </li>
      </ul>
    </li>
  </ul>
</div>

<script>
  function handleMenuTriggerKeydown(event) {
    switch (event.key) {
      case 'Enter':
      case ' ':
      case 'ArrowDown':
        event.preventDefault();
        openMenu();
        break;

      case 'ArrowUp':
        event.preventDefault();
        openMenu(true); // Focus last item
        break;
    }
  }

  function handleMenuKeydown(event) {
    const menuItems = [
      ...event.target
        .closest('[role="menu"]')
        .querySelectorAll('[role="menuitem"]:not([aria-hidden="true"])'),
    ];
    const currentIndex = menuItems.indexOf(
      event.target.closest('[role="menuitem"]')
    );

    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        const nextIndex = (currentIndex + 1) % menuItems.length;
        menuItems[nextIndex].querySelector('button').focus();
        break;

      case 'ArrowUp':
        event.preventDefault();
        const prevIndex =
          currentIndex === 0 ? menuItems.length - 1 : currentIndex - 1;
        menuItems[prevIndex].querySelector('button').focus();
        break;

      case 'Enter':
      case ' ':
        event.preventDefault();
        event.target.click();
        break;

      case 'Escape':
        closeMenu();
        document.getElementById('menu-trigger').focus();
        break;

      case 'ArrowRight':
        // Handle submenu navigation
        const submenu = event.target
          .closest('[role="menuitem"]')
          .querySelector('[role="menu"]');
        if (submenu) {
          event.preventDefault();
          openSubmenu(submenu);
        }
        break;

      case 'ArrowLeft':
        // Close submenu or return to parent menu
        const parentMenu = event.target
          .closest('[role="menu"]')
          .parentElement.closest('[role="menu"]');
        if (parentMenu) {
          event.preventDefault();
          closeSubmenu();
          // Focus parent menu item
        }
        break;
    }
  }
</script>

Tab Navigation

<div class="tab-container">
  <div
    role="tablist"
    aria-label="Settings sections"
    onkeydown="handleTabListKeydown(event)"
  >
    <button
      role="tab"
      id="general-tab"
      aria-selected="true"
      aria-controls="general-panel"
      tabindex="0"
    >
      General
    </button>

    <button
      role="tab"
      id="privacy-tab"
      aria-selected="false"
      aria-controls="privacy-panel"
      tabindex="-1"
    >
      Privacy
    </button>

    <button
      role="tab"
      id="security-tab"
      aria-selected="false"
      aria-controls="security-panel"
      tabindex="-1"
    >
      Security
    </button>
  </div>

  <div
    role="tabpanel"
    id="general-panel"
    aria-labelledby="general-tab"
    tabindex="0"
  >
    <h3>General Settings</h3>
    <label> <input type="checkbox" /> Enable notifications </label>
  </div>

  <div
    role="tabpanel"
    id="privacy-panel"
    aria-labelledby="privacy-tab"
    tabindex="0"
    hidden
  >
    <h3>Privacy Settings</h3>
    <label> <input type="checkbox" /> Share usage data </label>
  </div>
</div>

<script>
  function handleTabListKeydown(event) {
    const tabs = [
      ...event.target
        .closest('[role="tablist"]')
        .querySelectorAll('[role="tab"]'),
    ];
    const currentIndex = tabs.indexOf(event.target);
    let nextIndex;

    switch (event.key) {
      case 'ArrowRight':
      case 'ArrowLeft':
        event.preventDefault();

        if (event.key === 'ArrowRight') {
          nextIndex = (currentIndex + 1) % tabs.length;
        } else {
          nextIndex = currentIndex === 0 ? tabs.length - 1 : currentIndex - 1;
        }

        selectTab(tabs[nextIndex]);
        break;

      case 'Home':
        event.preventDefault();
        selectTab(tabs[0]);
        break;

      case 'End':
        event.preventDefault();
        selectTab(tabs[tabs.length - 1]);
        break;
    }
  }

  function selectTab(tab) {
    // Update ARIA states
    const tablist = tab.closest('[role="tablist"]');
    const tabs = [...tablist.querySelectorAll('[role="tab"]')];

    tabs.forEach(t => {
      t.setAttribute('aria-selected', 'false');
      t.tabIndex = -1;
    });

    tab.setAttribute('aria-selected', 'true');
    tab.tabIndex = 0;
    tab.focus();

    // Show corresponding panel
    const panels = [...document.querySelectorAll('[role="tabpanel"]')];
    panels.forEach(p => (p.hidden = true));

    const targetPanel = document.getElementById(
      tab.getAttribute('aria-controls')
    );
    if (targetPanel) {
      targetPanel.hidden = false;
    }
  }
</script>

Listbox/Combobox Navigation

<div class="combobox-container">
  <label for="country-input">Choose a country</label>

  <div
    role="combobox"
    aria-expanded="false"
    aria-haspopup="listbox"
    aria-owns="country-listbox"
  >
    <input
      type="text"
      id="country-input"
      aria-autocomplete="list"
      aria-controls="country-listbox"
      onkeydown="handleComboboxKeydown(event)"
      oninput="filterOptions(event)"
      onfocus="showOptions()"
      onblur="hideOptions()"
    />
  </div>

  <ul
    id="country-listbox"
    role="listbox"
    aria-label="Country options"
    hidden
    onkeydown="handleListboxKeydown(event)"
  >
    <li role="option" id="option-us" aria-selected="false">United States</li>
    <li role="option" id="option-ca" aria-selected="false">Canada</li>
    <li role="option" id="option-uk" aria-selected="false">United Kingdom</li>
  </ul>
</div>

<script>
  function handleComboboxKeydown(event) {
    const listbox = document.getElementById('country-listbox');
    const options = [
      ...listbox.querySelectorAll('[role="option"]:not([hidden])'),
    ];

    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        if (listbox.hidden) {
          showOptions();
        }
        focusOption(options[0]);
        break;

      case 'ArrowUp':
        event.preventDefault();
        if (listbox.hidden) {
          showOptions();
        }
        focusOption(options[options.length - 1]);
        break;

      case 'Escape':
        hideOptions();
        break;

      case 'Enter':
        if (!listbox.hidden) {
          const selectedOption = listbox.querySelector(
            '[aria-selected="true"]'
          );
          if (selectedOption) {
            selectOption(selectedOption);
          }
        }
        break;
    }
  }

  function handleListboxKeydown(event) {
    const options = [
      ...event.target
        .closest('[role="listbox"]')
        .querySelectorAll('[role="option"]:not([hidden])'),
    ];
    const currentIndex = options.indexOf(event.target);

    switch (event.key) {
      case 'ArrowDown':
        event.preventDefault();
        const nextIndex = (currentIndex + 1) % options.length;
        focusOption(options[nextIndex]);
        break;

      case 'ArrowUp':
        event.preventDefault();
        const prevIndex =
          currentIndex === 0 ? options.length - 1 : currentIndex - 1;
        focusOption(options[prevIndex]);
        break;

      case 'Enter':
      case ' ':
        event.preventDefault();
        selectOption(event.target);
        break;

      case 'Escape':
        hideOptions();
        document.getElementById('country-input').focus();
        break;

      case 'Home':
        event.preventDefault();
        focusOption(options[0]);
        break;

      case 'End':
        event.preventDefault();
        focusOption(options[options.length - 1]);
        break;

      // Type-ahead support
      default:
        if (event.key.length === 1) {
          const char = event.key.toLowerCase();
          const matchingOption = options.find(option =>
            option.textContent.toLowerCase().startsWith(char)
          );
          if (matchingOption) {
            focusOption(matchingOption);
          }
        }
        break;
    }
  }

  function focusOption(option) {
    const options = [
      ...option.parentElement.querySelectorAll('[role="option"]'),
    ];
    options.forEach(opt => opt.setAttribute('aria-selected', 'false'));

    option.setAttribute('aria-selected', 'true');
    option.focus();

    // Update input value for preview
    const input = document.getElementById('country-input');
    input.value = option.textContent;
  }
</script>

---

Live Regions & Dynamic Content

Managing dynamic content updates for screen reader users.

Live Region Types

<!-- Polite announcements (don't interrupt) -->
<div id="status-updates" aria-live="polite" aria-atomic="false" class="sr-only">
  <!-- Status messages appear here -->
</div>

<!-- Assertive announcements (interrupt current speech) -->
<div
  id="error-announcements"
  aria-live="assertive"
  aria-atomic="true"
  role="alert"
  class="sr-only"
>
  <!-- Critical errors appear here -->
</div>

<!-- Off - no announcements -->
<div id="debug-info" aria-live="off" aria-relevant="text additions removals">
  <!-- Debug info that shouldn't be announced -->
</div>

<!-- Log for sequential updates -->
<div
  id="activity-log"
  role="log"
  aria-label="Recent activity"
  aria-live="polite"
>
  <ul>
    <li>User John logged in at 2:30 PM</li>
    <li>Document saved at 2:32 PM</li>
    <!-- New items added here -->
  </ul>
</div>

<!-- Timer/countdown -->
<div id="timer-display" role="timer" aria-live="polite" aria-atomic="true">
  <span class="time">05:00</span>
  <span class="label">minutes remaining</span>
</div>

Dynamic Content Management

class LiveRegionManager {
  constructor() {
    this.regions = {
      status: this.createRegion('polite', false),
      alert: this.createRegion('assertive', true),
      log: this.createRegion('polite', false, 'log'),
    };
  }

  createRegion(level, atomic, role = null) {
    const region = document.createElement('div');
    region.setAttribute('aria-live', level);
    region.setAttribute('aria-atomic', atomic.toString());
    region.className = 'sr-only';

    if (role) {
      region.setAttribute('role', role);
    }

    document.body.appendChild(region);
    return region;
  }

  announce(message, type = 'status', delay = 100) {
    // Small delay ensures screen readers catch the update
    setTimeout(() => {
      const region = this.regions[type];
      if (region) {
        region.textContent = message;

        // Clear after announcement to allow repeated messages
        setTimeout(() => {
          region.textContent = '';
        }, 1000);
      }
    }, delay);
  }

  appendToLog(message, timestamp = true) {
    const logRegion = this.regions.log;
    const entry = document.createElement('div');

    if (timestamp) {
      const time = new Date().toLocaleTimeString();
      entry.textContent = `${time}: ${message}`;
    } else {
      entry.textContent = message;
    }

    logRegion.appendChild(entry);

    // Limit log entries to prevent performance issues
    const entries = logRegion.children;
    if (entries.length > 50) {
      logRegion.removeChild(entries[0]);
    }
  }
}

// Usage examples
const liveRegions = new LiveRegionManager();

// Status updates
function saveDocument() {
  // ... save logic
  liveRegions.announce('Document saved successfully');
}

// Error alerts
function handleError(error) {
  liveRegions.announce(`Error: ${error.message}`, 'alert');
}

// Activity logging
function logActivity(activity) {
  liveRegions.appendToLog(activity);
}

Form Validation with Live Feedback

<form novalidate onsubmit="handleFormSubmit(event)">
  <div class="form-group">
    <label for="username">Username *</label>
    <input
      type="text"
      id="username"
      name="username"
      required
      minlength="3"
      aria-describedby="username-help username-feedback"
      oninput="validateField(this)"
      onblur="validateField(this, true)"
    />

    <div id="username-help" class="help-text">
      Username must be at least 3 characters long
    </div>

    <div
      id="username-feedback"
      aria-live="polite"
      aria-atomic="true"
      class="validation-feedback"
    >
      <!-- Validation messages appear here -->
    </div>
  </div>

  <div class="form-group">
    <label for="email">Email Address *</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-describedby="email-help email-feedback"
      oninput="validateField(this)"
      onblur="validateField(this, true)"
    />

    <div id="email-help" class="help-text">Enter a valid email address</div>

    <div
      id="email-feedback"
      aria-live="polite"
      class="validation-feedback"
    ></div>
  </div>

  <!-- Form-level feedback -->
  <div
    id="form-feedback"
    role="alert"
    aria-live="assertive"
    class="form-errors"
  >
    <!-- Form submission errors appear here -->
  </div>

  <button type="submit">Submit</button>
</form>

<script>
  function validateField(field, showSuccess = false) {
    const feedback = document.getElementById(field.id + '-feedback');
    const isValid = field.checkValidity();

    // Clear previous state
    field.removeAttribute('aria-invalid');
    feedback.textContent = '';
    feedback.className = 'validation-feedback';

    if (!isValid) {
      field.setAttribute('aria-invalid', 'true');
      feedback.className = 'validation-feedback error';
      feedback.textContent = field.validationMessage;
    } else if (showSuccess && field.value.trim()) {
      feedback.className = 'validation-feedback success';
      feedback.textContent = 'Valid';
    }
  }

  function handleFormSubmit(event) {
    event.preventDefault();

    const form = event.target;
    const formFeedback = document.getElementById('form-feedback');
    const isValid = form.checkValidity();

    if (!isValid) {
      // Show form-level errors
      formFeedback.innerHTML = `
      <h3>Please correct the following errors:</h3>
      <ul>
        ${Array.from(form.elements)
          .filter(el => !el.checkValidity() && el.name)
          .map(
            el =>
              `<li>${el.labels[0]?.textContent || el.name}: ${el.validationMessage}</li>`
          )
          .join('')}
      </ul>
    `;

      // Focus first invalid field
      const firstInvalid = form.querySelector(':invalid');
      if (firstInvalid) {
        firstInvalid.focus();
      }
    } else {
      formFeedback.innerHTML = '<p>Form submitted successfully!</p>';
      // Process form...
    }
  }
</script>

---

Form Accessibility

Comprehensive form accessibility patterns and techniques.

Field Grouping and Relationships

<form>
  <!-- Required field indicators -->
  <fieldset>
    <legend>
      Personal Information
      <span class="required-note">(* indicates required fields)</span>
    </legend>

    <div class="form-row">
      <div class="form-group">
        <label for="first-name">
          First Name *
          <span class="sr-only">(required)</span>
        </label>
        <input
          type="text"
          id="first-name"
          name="firstName"
          required
          autocomplete="given-name"
          aria-describedby="name-help"
        />
      </div>

      <div class="form-group">
        <label for="last-name">
          Last Name *
          <span class="sr-only">(required)</span>
        </label>
        <input
          type="text"
          id="last-name"
          name="lastName"
          required
          autocomplete="family-name"
        />
      </div>
    </div>

    <div id="name-help" class="help-text">
      Enter your full legal name as it appears on official documents
    </div>
  </fieldset>

  <!-- Radio button groups -->
  <fieldset>
    <legend>Contact Preference</legend>
    <div role="radiogroup" aria-describedby="contact-help">
      <label>
        <input type="radio" name="contact" value="email" checked />
        Email
      </label>
      <label>
        <input type="radio" name="contact" value="phone" />
        Phone
      </label>
      <label>
        <input type="radio" name="contact" value="mail" />
        Mail
      </label>
    </div>
    <div id="contact-help" class="help-text">
      Choose how you'd like us to contact you
    </div>
  </fieldset>

  <!-- Checkbox groups -->
  <fieldset>
    <legend>Interests (select all that apply)</legend>
    <div class="checkbox-group">
      <label>
        <input type="checkbox" name="interests" value="technology" />
        Technology
      </label>
      <label>
        <input type="checkbox" name="interests" value="design" />
        Design
      </label>
      <label>
        <input type="checkbox" name="interests" value="business" />
        Business
      </label>
    </div>
  </fieldset>

  <!-- Complex input with multiple parts -->
  <fieldset>
    <legend>Phone Number</legend>
    <div class="phone-input" role="group" aria-labelledby="phone-legend">
      <label for="phone-country" class="sr-only">Country code</label>
      <select
        id="phone-country"
        name="phoneCountry"
        aria-describedby="phone-help"
      >
        <option value="+1">+1 (US)</option>
        <option value="+44">+44 (UK)</option>
        <option value="+33">+33 (FR)</option>
      </select>

      <label for="phone-number" class="sr-only">Phone number</label>
      <input
        type="tel"
        id="phone-number"
        name="phoneNumber"
        placeholder="(555) 123-4567"
        autocomplete="tel"
        aria-describedby="phone-help"
      />
    </div>
    <div id="phone-help" class="help-text">
      Include area code for US numbers
    </div>
  </fieldset>
</form>

Advanced Input Types

<div class="advanced-inputs">
  <!-- Date picker -->
  <div class="form-group">
    <label for="birth-date">Date of Birth</label>
    <input
      type="date"
      id="birth-date"
      name="birthDate"
      min="1900-01-01"
      max="2023-12-31"
      aria-describedby="date-help"
      onchange="validateAge(this)"
    />
    <div id="date-help" class="help-text">Must be 18 years or older</div>
  </div>

  <!-- Range slider -->
  <div class="form-group">
    <label for="salary-range">Expected Salary Range</label>
    <div class="range-container">
      <input
        type="range"
        id="salary-range"
        name="salaryRange"
        min="30000"
        max="200000"
        step="5000"
        value="75000"
        aria-describedby="salary-help salary-value"
        oninput="updateRangeValue(this)"
      />
      <output id="salary-value" for="salary-range" aria-live="polite">
        $75,000
      </output>
    </div>
    <div id="salary-help" class="help-text">
      Adjust slider to set your expected salary range
    </div>
  </div>

  <!-- File upload -->
  <div class="form-group">
    <label for="resume-upload">Upload Resume</label>
    <input
      type="file"
      id="resume-upload"
      name="resume"
      accept=".pdf,.doc,.docx"
      aria-describedby="file-help file-status"
      onchange="handleFileUpload(this)"
    />
    <div id="file-help" class="help-text">
      Accepted formats: PDF, DOC, DOCX (max 5MB)
    </div>
    <div id="file-status" aria-live="polite" class="file-status">
      <!-- Upload status appears here -->
    </div>
  </div>

  <!-- Multi-step progress -->
  <div class="progress-container">
    <div
      role="progressbar"
      aria-valuenow="2"
      aria-valuemin="1"
      aria-valuemax="4"
      aria-labelledby="progress-label"
    >
      <div id="progress-label">Step 2 of 4: Contact Information</div>
      <div class="progress-bar">
        <div class="progress-fill" style="width: 50%"></div>
      </div>
    </div>
  </div>
</div>

<script>
  function updateRangeValue(slider) {
    const output = document.getElementById('salary-value');
    const value = parseInt(slider.value);
    output.textContent = `${value.toLocaleString()}`;
  }

  function handleFileUpload(input) {
    const status = document.getElementById('file-status');
    const file = input.files[0];

    if (file) {
      if (file.size > 5 * 1024 * 1024) {
        // 5MB
        status.innerHTML =
          '<span class="error">File too large. Maximum size is 5MB.</span>';
        input.value = '';
      } else {
        status.innerHTML = `<span class="success">File selected: ${file.name}</span>`;
      }
    } else {
      status.textContent = '';
    }
  }
</script>

---

Modal & Dialog Patterns

Accessible modal and dialog implementations with proper focus management.

Basic Modal Dialog

<div
  id="modal-overlay"
  class="modal-overlay"
  hidden
  onclick="handleOverlayClick(event)"
>
  <div
    id="confirmation-modal"
    role="dialog"
    aria-modal="true"
    aria-labelledby="modal-title"
    aria-describedby="modal-description"
    class="modal"
    onkeydown="handleModalKeydown(event)"
  >
    <div class="modal-header">
      <h2 id="modal-title">Confirm Deletion</h2>
      <button
        type="button"
        class="close-button"
        aria-label="Close dialog"
        onclick="closeModal()"
      >
        <span aria-hidden="true">×</span>
      </button>
    </div>

    <div class="modal-body">
      <p id="modal-description">
        Are you sure you want to delete this item? This action cannot be undone.
      </p>
    </div>

    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" onclick="closeModal()">
        Cancel
      </button>
      <button
        type="button"
        class="btn btn-danger"
        onclick="confirmDelete()"
        autofocus
      >
        Delete
      </button>
    </div>
  </div>
</div>

<script>
  let previousActiveElement = null;
  const focusManager = new FocusManager();

  function openModal(modalId) {
    // Store current focus
    previousActiveElement = document.activeElement;

    const overlay = document.getElementById('modal-overlay');
    const modal = document.getElementById(modalId);

    // Show modal
    overlay.hidden = false;

    // Trap focus within modal
    focusManager.trapFocus(modal);

    // Focus first focusable element or autofocus element
    const autofocusElement = modal.querySelector('[autofocus]');
    const firstFocusable = focusManager.getFocusableElements(modal)[0];

    if (autofocusElement) {
      autofocusElement.focus();
    } else if (firstFocusable) {
      firstFocusable.focus();
    }

    // Prevent body scroll
    document.body.style.overflow = 'hidden';

    // Announce to screen readers
    setTimeout(() => {
      liveRegions.announce('Dialog opened', 'status');
    }, 100);
  }

  function closeModal() {
    const overlay = document.getElementById('modal-overlay');

    // Hide modal
    overlay.hidden = true;

    // Restore focus
    if (previousActiveElement) {
      previousActiveElement.focus();
      previousActiveElement = null;
    }

    // Restore body scroll
    document.body.style.overflow = '';

    // Announce to screen readers
    liveRegions.announce('Dialog closed', 'status');
  }

  function handleModalKeydown(event) {
    if (event.key === 'Escape') {
      closeModal();
    }
  }

  function handleOverlayClick(event) {
    if (event.target === event.currentTarget) {
      closeModal();
    }
  }

  function confirmDelete() {
    // Perform deletion
    liveRegions.announce('Item deleted successfully', 'status');
    closeModal();
  }
</script>

Alert Dialog

<div
  id="alert-modal"
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="alert-title"
  aria-describedby="alert-description"
  class="modal alert-modal"
  hidden
>
  <div class="modal-content">
    <div class="alert-icon" aria-hidden="true">⚠️</div>
    <h2 id="alert-title">System Error</h2>
    <p id="alert-description">
      An unexpected error occurred. Your work has been saved automatically.
    </p>
    <button
      type="button"
      class="btn btn-primary"
      onclick="closeAlertModal()"
      autofocus
    >
      OK
    </button>
  </div>
</div>

Form Dialog

<div
  id="form-modal"
  role="dialog"
  aria-modal="true"
  aria-labelledby="form-modal-title"
  class="modal form-modal"
  hidden
>
  <form onsubmit="handleFormModalSubmit(event)" novalidate>
    <div class="modal-header">
      <h2 id="form-modal-title">Add New Contact</h2>
      <button type="button" aria-label="Close" onclick="closeFormModal()">
        ×
      </button>
    </div>

    <div class="modal-body">
      <div class="form-group">
        <label for="contact-name">Name *</label>
        <input
          type="text"
          id="contact-name"
          name="name"
          required
          aria-describedby="name-error"
          autofocus
        />
        <div
          id="name-error"
          role="alert"
          aria-live="assertive"
          class="error-message"
        ></div>
      </div>

      <div class="form-group">
        <label for="contact-email">Email</label>
        <input
          type="email"
          id="contact-email"
          name="email"
          aria-describedby="email-error"
        />
        <div
          id="email-error"
          role="alert"
          aria-live="assertive"
          class="error-message"
        ></div>
      </div>
    </div>

    <div class="modal-footer">
      <button type="button" onclick="closeFormModal()">Cancel</button>
      <button type="submit">Add Contact</button>
    </div>
  </form>
</div>

---

Testing & Validation

Tools and techniques for testing accessibility implementation.

Automated Testing

// Basic accessibility testing utilities
class AccessibilityTester {
  constructor() {
    this.violations = [];
  }

  testFocusManagement() {
    const focusableElements = document.querySelectorAll(
      'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );

    focusableElements.forEach(element => {
      if (element.tabIndex === 0 && !this.isVisible(element)) {
        this.violations.push({
          type: 'focus',
          element: element,
          message: 'Focusable element is not visible',
        });
      }
    });
  }

  testLabels() {
    const inputs = document.querySelectorAll('input, select, textarea');

    inputs.forEach(input => {
      const hasLabel = this.hasLabel(input);
      if (!hasLabel) {
        this.violations.push({
          type: 'label',
          element: input,
          message: 'Form control missing label',
        });
      }
    });
  }

  testHeadingStructure() {
    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
    let previousLevel = 0;

    headings.forEach((heading, index) => {
      const level = parseInt(heading.tagName.charAt(1));

      if (index === 0 && level !== 1) {
        this.violations.push({
          type: 'heading',
          element: heading,
          message: 'Page should start with h1',
        });
      }

      if (level > previousLevel + 1) {
        this.violations.push({
          type: 'heading',
          element: heading,
          message: `Heading level jumps from h${previousLevel} to h${level}`,
        });
      }

      previousLevel = level;
    });
  }

  testAriaLabels() {
    const elementsWithAriaLabel = document.querySelectorAll('[aria-label]');
    const elementsWithAriaLabelledby =
      document.querySelectorAll('[aria-labelledby]');

    elementsWithAriaLabelledby.forEach(element => {
      const ids = element.getAttribute('aria-labelledby').split(' ');
      ids.forEach(id => {
        if (!document.getElementById(id)) {
          this.violations.push({
            type: 'aria',
            element: element,
            message: `aria-labelledby references non-existent id: ${id}`,
          });
        }
      });
    });
  }

  hasLabel(input) {
    // Check for label element
    if (input.labels && input.labels.length > 0) return true;

    // Check for aria-label
    if (input.getAttribute('aria-label')) return true;

    // Check for aria-labelledby
    if (input.getAttribute('aria-labelledby')) {
      const ids = input.getAttribute('aria-labelledby').split(' ');
      return ids.every(id => document.getElementById(id));
    }

    return false;
  }

  isVisible(element) {
    const style = window.getComputedStyle(element);
    return (
      style.display !== 'none' &&
      style.visibility !== 'hidden' &&
      style.opacity !== '0'
    );
  }

  runAllTests() {
    this.violations = [];
    this.testFocusManagement();
    this.testLabels();
    this.testHeadingStructure();
    this.testAriaLabels();

    return this.violations;
  }

  generateReport() {
    const violations = this.runAllTests();

    console.group('Accessibility Test Results');

    if (violations.length === 0) {
      console.log('✅ No violations found');
    } else {
      console.log(`❌ Found ${violations.length} violations:`);

      violations.forEach((violation, index) => {
        console.group(`${index + 1}. ${violation.type.toUpperCase()}`);
        console.log('Message:', violation.message);
        console.log('Element:', violation.element);
        console.groupEnd();
      });
    }

    console.groupEnd();

    return violations;
  }
}

// Usage
const tester = new AccessibilityTester();
tester.generateReport();

Manual Testing Checklist

## Accessibility Testing Checklist

### Keyboard Navigation

- [ ] All interactive elements are reachable via Tab key
- [ ] Tab order is logical and matches visual layout
- [ ] Focus indicators are visible and clear
- [ ] Escape key closes modals/menus appropriately
- [ ] Arrow keys work in menus, tabs, and other widgets
- [ ] Enter/Space activate buttons and links

### Screen Reader Testing

- [ ] Page has proper heading structure (h1, h2, h3, etc.)
- [ ] All images have appropriate alt text
- [ ] Form controls have labels
- [ ] Error messages are announced
- [ ] Dynamic content updates are announced
- [ ] Landmarks help with navigation

### Visual Testing

- [ ] Text has sufficient color contrast (4.5:1 for normal, 3:1 for large)
- [ ] Focus indicators are visible
- [ ] Text is readable when zoomed to 200%
- [ ] No information conveyed by color alone
- [ ] Content reflows properly on mobile devices

### ARIA Testing

- [ ] ARIA roles are used appropriately
- [ ] ARIA states update correctly (expanded, selected, etc.)
- [ ] aria-live regions announce changes
- [ ] No invalid ARIA attribute combinations

### Form Testing

- [ ] Required fields are clearly marked
- [ ] Validation errors are associated with fields
- [ ] Error messages are descriptive
- [ ] Success messages are announced
- [ ] Field groups use fieldset/legend appropriately

Testing Tools Integration

// Integration with popular testing tools
class AccessibilityTestSuite {
  async runAxeTests() {
    // Requires axe-core library
    if (typeof axe !== 'undefined') {
      try {
        const results = await axe.run();
        console.log('Axe test results:', results);
        return results.violations;
      } catch (error) {
        console.error('Axe testing failed:', error);
        return [];
      }
    } else {
      console.warn('axe-core library not loaded');
      return [];
    }
  }

  simulateScreenReader() {
    // Basic screen reader simulation
    const elements = document.querySelectorAll('*');
    const announcement = [];

    elements.forEach(element => {
      if (this.isVisible(element) && this.hasTextContent(element)) {
        const role =
          element.getAttribute('role') || this.getImplicitRole(element);
        const label = this.getAccessibleName(element);

        if (label) {
          announcement.push({
            element: element,
            role: role,
            name: label,
            states: this.getStates(element),
          });
        }
      }
    });

    return announcement;
  }

  getImplicitRole(element) {
    const roleMap = {
      button: 'button',
      a: element.href ? 'link' : null,
      input: this.getInputRole(element),
      h1: 'heading',
      h2: 'heading',
      h3: 'heading',
      h4: 'heading',
      h5: 'heading',
      h6: 'heading',
      nav: 'navigation',
      main: 'main',
      header: 'banner',
      footer: 'contentinfo',
      aside: 'complementary',
    };

    return roleMap[element.tagName.toLowerCase()] || null;
  }

  getInputRole(input) {
    const typeRoleMap = {
      checkbox: 'checkbox',
      radio: 'radio',
      range: 'slider',
      text: 'textbox',
      email: 'textbox',
      password: 'textbox',
      search: 'searchbox',
    };

    return typeRoleMap[input.type] || 'textbox';
  }

  getAccessibleName(element) {
    // Priority order for accessible name calculation

    // 1. aria-label
    if (element.hasAttribute('aria-label')) {
      return element.getAttribute('aria-label');
    }

    // 2. aria-labelledby
    if (element.hasAttribute('aria-labelledby')) {
      const ids = element.getAttribute('aria-labelledby').split(' ');
      const names = ids
        .map(id => {
          const referencedElement = document.getElementById(id);
          return referencedElement ? referencedElement.textContent.trim() : '';
        })
        .filter(name => name);

      if (names.length > 0) {
        return names.join(' ');
      }
    }

    // 3. Associated label
    if (element.labels && element.labels.length > 0) {
      return element.labels[0].textContent.trim();
    }

    // 4. alt attribute (for images)
    if (element.hasAttribute('alt')) {
      return element.getAttribute('alt');
    }

    // 5. title attribute
    if (element.hasAttribute('title')) {
      return element.getAttribute('title');
    }

    // 6. Text content (for certain elements)
    if (
      ['button', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(
        element.tagName.toLowerCase()
      )
    ) {
      return element.textContent.trim();
    }

    return null;
  }

  getStates(element) {
    const states = [];

    // Common ARIA states
    const ariaStates = [
      'aria-expanded',
      'aria-checked',
      'aria-selected',
      'aria-pressed',
      'aria-disabled',
      'aria-invalid',
      'aria-hidden',
    ];

    ariaStates.forEach(state => {
      if (element.hasAttribute(state)) {
        const value = element.getAttribute(state);
        states.push(`${state}: ${value}`);
      }
    });

    // HTML states
    if (element.disabled) states.push('disabled');
    if (element.required) states.push('required');
    if (element.checked) states.push('checked');

    return states;
  }

  isVisible(element) {
    const rect = element.getBoundingClientRect();
    const style = window.getComputedStyle(element);

    return (
      rect.width > 0 &&
      rect.height > 0 &&
      style.opacity !== '0' &&
      style.visibility !== 'hidden' &&
      style.display !== 'none'
    );
  }

  hasTextContent(element) {
    return element.textContent && element.textContent.trim().length > 0;
  }
}

// Usage
const testSuite = new AccessibilityTestSuite();

// Run manual tests
const manualResults = new AccessibilityTester().runAllTests();

// Run axe tests (if available)
testSuite.runAxeTests().then(axeResults => {
  console.log('Combined test results:', {
    manual: manualResults,
    axe: axeResults,
  });
});

// Simulate screen reader output
const srOutput = testSuite.simulateScreenReader();
console.log('Screen reader simulation:', srOutput);

---

Summary

This comprehensive guide covers:

• ARIA Roles: Semantic meaning for assistive technologies
• ARIA States & Properties: Dynamic states and relationships
• Keyboard Navigation: Proper focus management and interaction patterns
• Live Regions: Dynamic content announcements
• Form Accessibility: Proper labeling, validation, and error handling
• Modal Patterns: Focus trapping and proper dialog implementation
• Testing: Automated and manual accessibility validation

Key Principles to Remember

1. Semantic HTML First: Use native elements when possible before adding ARIA
2. Progressive Enhancement: Build accessible foundations, then enhance
3. Test with Real Users: Nothing replaces testing with actual assistive technology users
4. Focus Management: Always know where focus is and where it should go
5. Clear Communication: Provide clear, descriptive labels and instructions

Quick Reference

Essential ARIA attributes:

• aria-label, aria-labelledby, aria-describedby for labeling
• aria-expanded, aria-selected, aria-checked for states
• aria-live, role="alert" for dynamic content
• aria-hidden to hide decorative elements

Key keyboard patterns:

• Tab/Shift+Tab for focus navigation
• Enter/Space for activation
• Arrow keys for widget navigation
• Escape for dismissal/cancellation

Testing priorities:

1. Keyboard-only navigation
2. Screen reader compatibility
3. Color contrast and visual clarity
4. Error handling and feedback
5. Mobile accessibility